<template>
    <div>
        <div class="container">
            <h1>我的包裹</h1>
            <el-divider></el-divider>
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-search"></el-button>
                <el-select
                    style="margin-left: 10px"
                    v-model="value"
                    @change="select_change"
                    clearable=""
                    @clear="create_met"
                    placeholder="请选择"
                >
                    <el-option-group v-for="group in options" :key="group.label" :label="group.label">
                        <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-option-group>
                </el-select>
            </div>

            <el-table
                :data="expressInfo.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                v-loading="loading"
                style="width: 100%"
                stripe
            >
                <el-table-column label="序号" type="index" width="50"> </el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item label="发件人:">
                                <span>{{ props.row.from_name }}</span>
                            </el-form-item>
                            <el-form-item label="收件人:">
                                <span>{{ props.row.to_name }}</span>
                            </el-form-item>
                            <el-form-item label="发件人电话:">
                                <span>{{ props.row.from_tel }}</span>
                            </el-form-item>
                            <el-form-item label="收件人电话:">
                                <span>{{ props.row.to_tel }}</span>
                            </el-form-item>
                            <el-form-item label="发件地址:">
                                <span>{{ props.row.from_address }}</span>
                            </el-form-item>

                            <el-form-item label="收件人地址:">
                                <span>{{ props.row.to_address }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="快递单号" prop="express_id"> </el-table-column>
                <el-table-column label="快递公司" prop="company_name"> </el-table-column>
                <el-table-column label="创建时间" sortable prop="time"> </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 15, 30, 45, 60, 75]"
                :page-size="pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="length"
                style="margin-left: 35%; margin-top: 20px"
            ></el-pagination>
        </div>
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'PackageStranded',
    // 数据
    data() {
        return {
            loading: false,
            //总数
            length: 0,
            //初始页
            currentPage: 1,
            //初始页大小
            pagesize: 10,
            value: null,
            options: [
                {
                    label: '待取包裹',
                    options: [
                        {
                            value: 0,
                            label: '未入库'
                        },
                        {
                            value: 1,
                            label: '已入库'
                        }
                    ]
                },
                {
                    label: '拒签包裹',
                    options: [
                        {
                            value: 3,
                            label: '已拒签'
                        },
                        {
                            value: 5,
                            label: '已寄回'
                        }
                    ]
                },
                {
                    label: '寄出包裹',
                    options: [
                        {
                            value: 4,
                            label: '已寄出'
                        }
                    ]
                }
            ],
            param: {
                to_name: ''
            },

            expressInfo: []
        };
    },
    // 方法
    methods: {
        // 当前页大小
        handleSizeChange(val) {
            this.pagesize = val;
        },
        // 当前页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        select_change() {
            console.log(this.value);
            let param = new URLSearchParams();
            param.append('to_name', localStorage.getItem('to_name'));
            param.append('state', this.value);
            const _this = this;
            if (this.value) {
                this.$axios({
                    method: 'POST',
                    url: 'express/getUserExpressInfoByName',
                    data: param,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
                })
                    .then(function (res) {
                        console.log(res);
                        if (res.data.code == 1) {
                            _this.expressInfo = res.data.result;
                            _this.length = res.data.result.length;
                        } else {
                            _this.expressInfo = null;
                            _this.$message(res.data.zhMsg);
                        }
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            }
        },
        // handleSearch() {},
        create_met() {
            this.loading = true;
            let param = new URLSearchParams();
            param.append('to_name', localStorage.getItem('to_name'));
            const _this = this;
            this.$axios({
                method: 'POST',
                url: 'express/getUserExpressInfoByName',
                data: param,
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            })
                .then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        _this.loading = false;
                        _this.expressInfo = res.data.result;
                        _this.length = _this.expressInfo.length;
                    } else {
                        _this.loading = false;
                        // _this.$message.err('删除失败！');
                        // _this.$message.
                    }
                })
                .catch(function (err) {
                    console.log(err);
                });
        }
    },

    // 页面初始化生命周期函数
    created() {
        this.create_met();
    }
};
</script>
// 样式
<style scoped>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.handle-box {
    margin-bottom: 20px;
}
</style>